<template>
  <div class="admin_box">
    <div class="b_top">
      <!--顶部导航-->
      <top_menu></top_menu>
    </div>
    <div class="b_bot" >
      <div class="menu">

        <!--右边菜单-->
        <el-menu class="my_el_menu"
                 :collapse="menuState"
                 :default-active="thisMenu"
                 :active="thisMenu"
                 @select="menuClick"
                 background-color="#334157"
                 text-color="#fff"
                 active-text-color="#ffd04b">
          <tree_menu :data="menuTree"></tree_menu>
        </el-menu>
      </div>
      <div class="view_main">
        <!--页面主体-->
        <el-tabs v-model="thisMenu" type="card" @tab-remove="removeTab">
          <el-tab-pane
            v-for="(item, index) in openMenu"
            :closable="item.id=='-1'?false:true"
            :key="item.id"
            :label="item.name"
            :name="item.id">
          </el-tab-pane>
        </el-tabs>
        <div class="view">
          <router-view class="router"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as c from '@/util/config'
  import * as u from '@/util/util'

  export default {
    name: "admin",
    components: {
      'tree_menu': () => import('@/components/menu/tree_menu.vue'),
      'top_menu': () => import('@/components/topMenu/index.vue'),
    },
    watch: {
      //监听菜单状态变化
      menuState:function(val){
        //存入session
        u.setSession(c.sessionKey.MENU_STATE, val);
      },
      $route: {
        handler: function (val, oldVal) {
            //判断切换的是否是首页
            if(c.HOME_PAGE.path==val.path) {
                this.menuClick(c.HOME_PAGE.id);
            }else{
                //获取当前要切换路由的菜单对象
                let menu = this.menuList.filter(x => x.path == val.path)[0];
                this.menuClick(menu.id);
            }
        },
        // 深度观察监听
        deep: true
      },
      openMenu: function (val) {
        u.setSession(c.sessionKey.OPEN_MENU, val);
      },
      //监听菜单切换
      thisMenu: function (val) {
        if (this.$route.path != this.openMenu.filter(x => x.id == val)[0].path) { //切换到不同路由才进行路由切换
          this.openUrl = this.openMenu.filter(x => x.id == val)[0].path;
          this.$router.push(this.openUrl)
          //设置当前菜单栏
          u.setSession(c.sessionKey.THIS_MENU_KEY, val);
        }
      }
    },
    data() {
      return {
        //菜单状态
        menuState: u.getSession(c.sessionKey.MENU_STATE)?u.getSession(c.sessionKey.MENU_STATE):false,
        //打开的路径
        openUrl: c.HOME_PAGE.path,
        //用户信息
        userInfo: u.getSession(c.sessionKey.USER_INFO),
        //菜单集合
        menuTree: u.getSession(c.sessionKey.SYS_MENU_TREE),
        menuList: [],
        //菜单树参数对应配置
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        //当前打开的节点
        thisMenu: c.HOME_PAGE.id,
        //打开过的菜单
        openMenu: [
          c.HOME_PAGE,
        ],
      }
    },
    created() {
      this.traverseMenuTree(this.menuTree);
      //设置初始tab
      //判断是否有tab留痕
      if (u.getSession(c.sessionKey.OPEN_MENU)) {
        //判断是否是首页
        this.openMenu = u.getSession(c.sessionKey.OPEN_MENU);
      }

      //判断是否有选中的菜单
      if (u.getSession(c.sessionKey.THIS_MENU_KEY)) {
        //判断是否是首页
        this.thisMenu = u.getSession(c.sessionKey.THIS_MENU_KEY);
      }
    },

    methods: {
      //编辑菜单树
      traverseMenuTree(tree) {
        tree.forEach(x => {
          if (x.children != null && x.children.length > 0) {
            this.traverseMenuTree(x.children);
          }
          this.menuList.push(x);
        })
      },


      menuClick(key) {
        this.thisMenu = key;
        //判断当前节点是否已经加入openMenu;
        if (this.openMenu.filter(x => x.id == key).length == 0) {
          this.openMenu.push(this.traverseTreeMenu(this.menuTree, key));
        }
      },

      //遍历找到菜单树找到当前指定菜单
      traverseTreeMenu(list, id) {
        let row;
        list.map(item => {
          if (item.children != null && item.children.length != 0) {
            row = this.traverseTreeMenu(item.children, id)
          }
          if (id == item.id) {
            row = item;
          }
        })
        return row;
      },

      //下拉菜单触发时间
      handleCommand(command) {
        switch (command) {
          case 'userInfo':
            break
          case 'logout':
            this.$confirm('是否确认退出登录?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              u.get("/logout").then(res => {
                u.clearSession();
                this.$router.push('/login')
              })
            })
            break
        }
      },
      //菜单隐藏显示
      unfold(val) {
        this.menuState = val;
      },

      /**
       * 删除一个tab
       * @param targetName
       */
      removeTab(delKey) {
        //找到需要删除的节点
        let delIndex = 0;
        this.openMenu.map((x, i) => {
          if (x.id == delKey) {
            this.openMenu.splice(i, 1);
            delIndex = i;
          }
        })
        //判断删除的id是否等于当前选择的id
        if (delKey == this.thisMenu) {
          if (delIndex >= this.openMenu.length) {
            this.thisMenu = this.openMenu[this.openMenu.length - 1].id;
          } else {
            this.thisMenu = this.openMenu[delIndex].id;
          }
        }
      },

    }
  }
</script>

<style scoped lang="scss">
  .admin_box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .b_top {
      width: 100%;
      display: flex;
      color: white;
    }

    .b_bot {
      flex: 1;
      width: 100%;
      display: flex;

      .menu {
        height: 100%;
        background-color: #334157;
        /deep/ .my_el_menu:not(.el-menu--collapse) {
          width: 200px;
          height: 100% !important;
        }
        .my_el_menu{
          border: 0px !important;
        }
      }

      .view_main {
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        .view {
          flex: 1;
          width: 99%;
          margin: 0 auto;
          .router{
            width: 99%;
            height: 100%;
            margin: 0 auto;
          }
        }
      }
    }
  }



</style>
